<%@page contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>用户注册 - 当当网</title>
		<link href="<%=request.getContextPath()%>/css/login.css" rel="stylesheet" type="text/css" />
		<link href="<%=request.getContextPath()%>/css/page_bottom.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/basic.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.3.js"></script>
		<script type="text/javascript">
		var vemail = false;
		var vnickname = false;
		var vpassword = false;
		var vrepeatPass = false;
		var vverifyCode = false;
		
		$(function(){
			//错误提示信息
			var errorMsg = $("#errorMsg").val();
			if (errorMsg && errorMsg != "null") {
				alert(errorMsg);
			}
			
			//验证码图片
			$("#imgVcode").click(function(){
				this.src = "<%=request.getContextPath()%>/checkCode.do?" + new Date().valueOf();
			});
			
			//为email输入框添加blur事件
			$("#txtEmail").blur(validateEmail);
			//为nickname输入框添加blur事件
			$("#txtNickName").blur(validateNickname);
			//为密码框添加blur事件
			$("#txtPassword").blur(validatePassword);
			//为重复密码加入blur事件
			$("#txtRepeatPass").blur(validateRepeatPass);
			//为验证码添加blur事件
			$("#txtVerifyCode").blur(validateVerifyCode);
			
			
			
			//表单提交时，对表单中的数据进行验证。符合要求之后可以提交，否则返回错误提示信息
			$("#f").submit(function(){
				var valid = vemail && vnickname && vpassword && vrepeatPass && vverifyCode;
				if(valid){
					$("#allmsg").html("");
					return true;
				}else{
					$("#allmsg").html("(请填写正确完整的信息)");
					return false;
				}
			});
		});
		
		
		//验证邮箱(非空、长度、符合邮箱格式要求、不能重复)
		function validateEmail(){
			var email = $("#txtEmail").val().trim();
			if (!email) {
				vemail = false;
				$("#email\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>Email地址不能为空!");
				return;
			}
			if (email.getStrLength() > 50) {
				vemail = false;
				$("#email\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>Email地址不能超过50个字符!");
				return;
			}
			var pattern=/\b(^['_A-Za-z0-9-]+(\.['_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(\.[A-Za-z0-9-]+)*((\.[A-Za-z0-9]{2,})|(\.[A-Za-z0-9]{2,}\.[A-Za-z0-9]{2,}))$)\b/;
			if(!pattern.test(email)){
				vemail = false;
				$("#email\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>Email地址格式不正确!");
				return;
			}
			$.ajax({
				"url" : "<%=request.getContextPath()%>/checkEmail.do",
				"type" : "POST",
				"data" : {"email" : email},
				"dataType" : "json",
				"success" : function(data, statusText){
					if (data) {
						vemail = false;
						$("#email\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>Email地址已被占用!");
					} else {
						$("#email\\.info").html("<img src='<%=request.getContextPath()%>/images/right.gif'/><span style='color:green'>Email地址可用!</span>");
						vemail = true;
					}
				}
			});
		}
		
		
		//为nickname输入框添加blur事件(非空、长度、格式)
		function validateNickname(){
			var nickname = $("#txtNickName").val().trim();
			if (!nickname) {
				vnickname = false;
				$("#name\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>昵称不能为空!");
				return;
			}
			var pattern=/^[\wa-z\u4e00-\u9fa5]+$/;
			if(!pattern.test(nickname)){
				vnickname = false;
				$("#name\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>昵称格式不正确!");
				return;
			}
			if (nickname.getStrLength() < 4 || nickname.getStrLength() > 20) {
				vnickname = false;
				$("#name\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>昵称字符长度不符合!");
				return;
			}
			$("#name\\.info").html("<img src='<%=request.getContextPath()%>/images/right.gif'/><span style='color:green'>昵称可用!</span>");
			vnickname = true;
		}
		
		//为密码框添加blur事件
		function validatePassword(){
			var pwd = $("#txtPassword").val().trim();
			var pattern = /^[a-zA-Z\w]{6,20}$/;
			if(!pattern.test(pwd)){
				vpassword = false;
				$("#password\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>密码格式不正确!");
			} else {
				vpassword = true;
				$("#password\\.info").html("<img src='<%=request.getContextPath()%>/images/right.gif'/><span style='color:green'>密码可用!</span>");
			}
		}
		
		//为重复密码加入blur事件
		function validateRepeatPass(){
			var pwd1 = $("#txtPassword").val().trim();
			var pwd2 = $("#txtRepeatPass").val().trim();
			if (!pwd1) {
				vrepeatPass = false;
				return;
			}
			if(pwd1 === pwd2){
				vrepeatPass = true;
				$("#password1\\.info").html("");
			}else{
				vrepeatPass = false;
				$("#password1\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>两次密码输入不同，请重新输入!");
			}
		}
		
		//为验证码添加blur事件
		function validateVerifyCode(){
			var verifyCode = $("#txtVerifyCode").val().trim();
			if (!verifyCode) {
				vverifyCode = false;
				return;
			}
			$.ajax({
				"url" : "<%=request.getContextPath()%>/validateCheckCode.do",
				"type" : "POST",
				"data" : {"verifyCode" : verifyCode},
				"dataType" : "json",
				"success" : function(data, statusText){
					if (data) {
						vverifyCode = true;
						$("#number\\.info").html("<img src='<%=request.getContextPath()%>/images/right.gif'/><span style='color:green'>验证码正确!</span>");
					} else {
						vverifyCode = false;
						$("#number\\.info").html("<img src='<%=request.getContextPath()%>/images/wrong.gif'/>验证码错误!");
					}
				}
			});
		}
		</script>
	</head>
	<body>
		<%@include file="../common/message.jsp"%>
		<%@include file="../common/head1.jsp"%>
		<div class="login_step">
			注册步骤:
			<span class="red_bold">1.填写信息</span> &gt; 2.验证邮箱 &gt; 3.注册成功
		</div>
		<div class="fill_message">
			<form name="ctl00" method="post" action="<%=request.getContextPath()%>/user/register/register.do" id="f">
				<h2>
					以下均为必填项	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="allmsg"></span>
				</h2>
				<table class="tab_login" >
					<tr>
						<td valign="top" class="w1">
							请填写您的Email地址：
						</td>
						<td>
							<input name="email" type="text" id="txtEmail" class="text_input" value="${user.email}"/>
							<div class="text_left" id="emailValidMsg">
								<p>
									请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
								</p>
									<span id="email.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置您在当当网的昵称：
						</td>
						<td>
							<input name="nickname" type="text" id="txtNickName" class="text_input" value="${user.nickname}"/>
							<div class="text_left" id="nickNameValidMsg">
								<p>
									您的昵称可以由小写英文字母、中文、数字组成，
								</p>
								<p>
									长度4－20个字符，一个汉字为两个字符。
								</p>
								<span id="name.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置密码：
						</td>
						<td>
							<input name="password" type="password" id="txtPassword"
								class="text_input" value="${user.password}"/>
							<div class="text_left" id="passwordValidMsg">
								<p>
									您的密码可以由大小写英文字母、数字组成，长度6－20位。
								</p>
								<span id="password.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							再次输入您设置的密码：
						</td>
						<td>
							<input name="password1" type="password" id="txtRepeatPass"
								class="text_input"/>
							<div class="text_left" id="repeatPassValidMsg">
							<span id="password1.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							验证码：
						</td>
						<td>
							<img class="yzm_img" id='imgVcode' src="<%=request.getContextPath()%>/checkCode.do"/>
							<input name="number" type="text" id="txtVerifyCode" class="yzm_input"/>
							<div class="text_left t1">
								<p class="t1">
									<span id="vcodeValidMsg">请输入图片中的四个字母。</span>
									<a href="javascript:;" id="ic" onclick="document.getElementById('imgVcode').src='<%=request.getContextPath()%>/checkCode.do?' + new Date().valueOf();">看不清楚？换个图片</a>
								</p>
								<span id="number.info" style="color:red"></span>
							</div>
						</td>
					</tr>
				</table>

				<div class="login_in">
					<input id="btnClientRegister" class="button_1" name="submit"  type="submit" value="注 册"/>
				</div>
			</form>
		</div>
		<%@include file="../common/foot1.jsp"%>
	</body>
</html>

